로딩 중이에요... 🐣
[코담]
웹개발·실전 프로젝트·AI까지, 파이썬·장고의 모든것을 담아낸 강의와 개발 노트
08 정적 파일(Static Assets) 다루기 | ✅ 편저: 코담 운영자
Django 튜토리얼 #8 - 정적 파일(Static Assets) 다루기
🔗 소스
1. 강의 목표
- 정적 파일(Static files)의 개념을 이해하고, Django에서 CSS, JS, 이미지 파일을 다루는 방법을 학습한다.
- 프로젝트와 앱에 정적 파일 디렉터리를 구성하고, HTML 템플릿에서
load static을 활용해 정적 파일을 불러오는 과정을 실습한다.
2. 정적 파일이란?
- 정적 파일: 서버가 동적으로 생성하지 않고 그대로 클라이언트에 전달하는 자원
- 예: CSS, JavaScript, 이미지
- 사용자 경험(UX)을 향상시키고 페이지 일관성과 반응성을 제공
✅ 정적 파일의 필요성
- 스타일 및 일관성 유지: 모든 페이지에서 공통 스타일 제공
- 성능 향상: 반복된 자원 요청 감소
- 상호작용 구현: 자바스크립트를 통한 동적 UI 제어 가능
3. 앱 내 static 및 templates 디렉터리 구성
lesson8-StaticAssets/
├── django_project/
│ ├── django_app/
│ │ ├── migrations/
│ │ ├── static/
│ │ │ ├── images/
│ │ │ │ └── dlogo.png
│ │ │ ├── js/
│ │ │ │ └── script.js
│ │ │ └── styles/
│ │ │ └── styles.css
│ │ ├── templates/
│ │ │ └── django_app/
│ │ │ └── index.html
│ │ ├── admin.py 등...
│ ├── django_project/
│ │ ├── settings.py 등...
│ ├── manage.py
│ └── Pipfile / Pipfile.lock
-
static/폴더는 CSS, JS, 이미지 등 정적 파일이 위치 -
templates/폴더는 HTML 템플릿이 위치하며 앱 이름 하위로 구성 -
static/폴더는 Django가 정적 파일을 찾는 기본 경로 -
하위 폴더에 CSS, JS, 이미지 등 유형별로 구분해 관리
4. settings.py 설정
# 앱 이름 등록
INSTALLED_APPS = [
...
'myapp',
]
# 정적 파일 URL 기본값
STATIC_URL = 'static/'
# 정적 파일 디렉토리 설정
import os
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
STATICFILES_DIRS는 추가로 찾을 static 경로 목록 (튜플/리스트 형태)os.path.join(BASE_DIR, 'static')을 사용해 base 디렉터리 기준 경로 지정os모듈은import os로 상단에서 반드시 불러와야 함
5. HTML 템플릿 내에서 정적 파일 사용 (index.html)
{% load static %}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Django는 멋져요</title>
<link rel="stylesheet" href="{% static 'styles/styles.css' %}">
</head>
<body>
<h1>Django에 오신 것을 환영합니다</h1>
<p>Django를 사용하면 더 나은 웹 앱을 더 빠르고 적은 코드로 쉽게 만들 수 있습니다!</p>
<img src="{% static 'images/dlogo.png' %}" alt="Django 로고">
<script src="{% static 'js/script.js' %}" defer></script>
</body>
</html>
-
{% load static %}: 템플릿 상단에 선언 필요 -
{% static '경로' %}구문으로 각 정적 파일 참조 -
HTML 문서 내에서 CSS, JS, 이미지가 모두 정상 연결됨
-
{% load static %}: 템플릿 상단에 선언 필요 -
{% static '경로' %}구문으로 각 정적 파일 참조 -
HTML 문서 내에서 CSS, JS, 이미지가 모두 정상 연결됨
-
{% load static %}: 템플릿 상단에 선언 필요 -
{% static '경로' %}구문으로 각 정적 파일 참조 -
Django는 내부적으로 static 경로를 매핑하여 브라우저에 전달함
6. 예시: style.css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
text-align: center;
padding: 20px;
}
img {
width: 300px;
}
- 기본적인 스타일 적용 (배경색, 정렬, 폰트 등)
7. 예시: script.js
document.addEventListener('DOMContentLoaded', function () {
alert('Hello Django!');
});
- DOM 로드 후 알림창 출력 (정상적으로 자바스크립트 로딩 확인용)
8. 주의 사항 및 실습 팁
STATICFILES_DIRS는 튜플 또는 리스트이며 쉼표(,) 누락 시 오류 발생- 정적 파일 경로는
"static/..."이 아닌{% static '...' %}형식으로 불러와야 함 - static 디렉터리는 프로젝트 루트 또는 앱 내부에 둘 수 있음
다음 강의 예고
- Django 폼(Form) 기능과 사용자 입력 처리 방법 학습 예정
Python 코드 실행기
